<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            text-align: center;
        }
    </style>
</head>

<body>
    <span>请输入姓名：</span>
    <input type="text" class="user"><br>
    <span>请输入邮箱：</span>
    <input type="text" class="email"><br>
    <button>添加</button>
    <table border="" cellpadding="3" cellspacing="0" width="600" height="10">
        <tr class="head">
            <th>姓名</th>
            <th width="500">邮箱</th>
        </tr>
    </table>
    <script>
        //获取事件源
        var btn = document.querySelector('button')

        var head = document.querySelector('.head')
        var inputs = document.querySelectorAll('input')
        //获取父节点
        var tab = document.querySelector('table')
        var head = document.querySelector('.head')

        //获得列数
        var col = head.children
        btn.onclick = function () {
            //创建行
            var tr = document.createElement('tr')
            //添加行
            tab.appendChild(tr)
            for (var i = 0; i < col.length; i++) {
                //创建列
                if (inputs[i].value != '') {
                    var td = document.createElement('td')
                    td.innerHTML = inputs[i].value
                    tr.appendChild(td)
                } else {
                    alert('请将信息填写完整')
                    //如果有一个值为空，则删除这一行，不予添加
                    tab.removeChild(tr)
                    break
                }

            }

        }
    </script>
</body>

</html>